<template>
    <div class="home">

        <Web-socket-demo1></Web-socket-demo1>
        <div id="container"></div>
        <div class="input-card">
            <div class="input-item">
                <input type="checkbox" @click="toggleScale($event)" checked />比例尺
            </div>

            <div class="input-item">
                <input
                        type="checkbox"
                        checked
                        id="toolbar"
                        @click="toggleToolBar($event)"
                />工具条
            </div>

            <div class="input-item">
                <input
                        type="checkbox"
                        checked
                        id="controlBar"
                        @click="toggleControlBar($event)"
                />工具条方向盘
            </div>

            <div class="input-item">
                <input
                        type="checkbox"
                        checked
                        id="overview"
                        @click="toggleOverViewShow($event)"
                />显示鹰眼
            </div>
        </div>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";
    import WebSocketDemo1 from './WebSocketDemo'
    import {EventBus} from '@/eventbus/event-bus.js'

    export default {
        name: "Home",
        components:{WebSocketDemo1},
        data() {
            return {
                markers: [],
                map: null,
                checked: false,
                scale: null,
                toolbar: null,
                overView: null,
                controlBar: null,
            };
        },
        methods: {
            initMap() {
                AMapLoader.load({
                    key: "ddf8798697c1aa0f705153f5f435b4cc", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: [
                        "AMap.ToolBar",
                        "AMap.ControlBar",
                        "AMap.Scale",
                        "AMap.HawkEye",
                    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                })
                    .then((AMap) => {
                        window.AMap = AMap;
                        this.map = new AMap.Map("container", {
                            //设置地图容器id
                            viewMode: "3D", //是否为3D地图模式
                            zoom: 11, //初始化地图级别
                            center: [116.06, 39.09], //初始化地图中心点位置
                        });
                        this.mapToolBar();
                        this.mapControlBar();
                        this.mapScale();
                        this.mapOverView();

                        // 创建一个 Marker 实例：
                        let marker1 = new AMap.Marker({
                            position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            title: '北京',
                        });
                        this.map.add(marker1)
                        this.markers.push(marker1)

                        let marker2 = new AMap.Marker({
                            position: new AMap.LngLat(116.06, 39.09),
                            title: '雄安',
                            //content: '<div style="color: red; width: 30px;"><img src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png" />'+'雄安' + "</div>",
                        });
                        this.map.add(marker2)
                        this.markers.push(marker2)
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },
            mapToolBar() {
                this.toolbar = new AMap.ToolBar({
                    position: {
                        top: "110px",
                        right: "40px",
                    },
                });
                this.map.addControl(this.toolbar);
            },
            mapOverView() {
                this.overView = new AMap.HawkEye({
                    opened: false,
                });
                this.map.addControl(this.overView);
            },
            mapControlBar() {
                this.controlBar = new AMap.ControlBar({
                    position: {
                        top: "10px",
                        right: "10px",
                    },
                });
                this.map.addControl(this.controlBar);
            },
            mapScale() {
                this.scale = new AMap.Scale();
                this.map.addControl(this.scale);
            },
            toggleScale(e) {
                if (e.target.checked) {
                    this.scale.show();
                    console.log("true");
                } else {
                    this.scale.hide();
                    console.log("false");
                }
            },
            toggleToolBar(e) {
                console.log(this.toolbar);
                if (e.target.checked) {
                    this.toolbar.show();
                } else {
                    this.toolbar.hide();
                }
            },
            toggleControlBar(e) {
                if (e.target.checked) {
                    this.controlBar.show();
                } else {
                    this.controlBar.hide();
                }
            },
            toggleOverViewShow(e) {
                if (e.target.checked) {
                    this.overView.show();
                } else {
                    this.overView.hide();
                }
            },
        },
        created() {},
        mounted() {
            //DOM初始化完成进行地图初始化
            this.initMap();
            let  that = this;
            //注册bus事件  处理句柄
            EventBus.$on('onalarm', param => {
                console.log(param);
                that.markers.forEach(function(marker ){
                    marker.setIcon(require("@/assets/mark_r.png") )
                });
            })
        },
    };
</script>

<style scoped>
    html,
    body,
    #container {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
    .input-card {
        top: 1rem;
        left: 1rem;
        height: 13.0833rem;
    }
</style>